<template>
  <div ref="myLine"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
export default {
  name: 'pppBar',
  props: ['xdata','afterData','beforeData'],
  data () {
    return {
      // xdata:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒1区", "A机筒流道区"],
      // ydata:[64,42,23, 10, 10,40],
      // ydata1:[34,44,53, 70, 40,50],
    }
  },
  created () {
    
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var _this=this;
      let dom= this.$refs.myLine;
      let myLine = echarts.init(dom);
      // 绘制图表
      myLine.setOption({
        textStyle: {
          color:'#fff',
        },
        title: {
          text: '能耗情况',//_this.title
          x:'center',
          subtext:'',//_this.subtitle
          textStyle: {
            color: '#fff',
            fontSize:18,
          },
          top: '20px',
          subtextStyle: {
            color: '#a0a0a0',
            fontSize: 15,
          },
        },
        legend: {
          data:['优化后','优化前'],
          top:'20px',
          right:'20px',
          width: '100px',
          textStyle: {
            color: '#fff',
          },
        },
        grid: {
          left: '8%',right: '10%',bottom:'60px',y2: 140,
        },
        tooltip: {},
        xAxis: {
          //interval:100,
          data: _this.xdata,//["J0009", "J0102", "J0002", "J0001", "J0101"]
          //name: '时间',
          boundaryGap: [0, 0.01],
          nameLocation: 'end',
          axisLine: {
            show:true,
            lineStyle: {
              color: '#345871',
              width: 2,
            },
            symbol:['none', 'arrow'],
          },
          axisTick: {show:false,},
          splitLine: {
            show: false,
            interval: 'auto',
            lineStyle: {
              color: ["#629fc2"],
              type: 'dashed',
            },
          },
          axisLabel: {
            //align:'left',
            fontSize:10,
            interval:0,
            rotate:30,//-30度角倾斜显示
            // formatter:function(value,index)  
            // {
            //   return value.split("").join("\n");  
            // }  
          },
          
        },
        yAxis: {
          name: '{a|能耗情况}',
          nameLocation: 'end',
          nameTextStyle: {
            color: '#00ffff',
            // formatter: [
            //     '{a|能耗情况每100KG/kwh}',
            // ].join('\n'),
            rich: {
              a: {
                color: '#00ffff',
                width: '20%',
              },
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#345871',
              width: 2,
            },
            symbol:['none', 'arrow'],
          },
          axisTick: {show:false,},
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: ["#2c5272"],
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: '优化后',
            type: 'bar',
            data: _this.afterData,//[64,42,23, 10, 10],
            itemStyle: {
              color:'#7ecef4',
              barBorderRadius: [5, 5, 0, 0]
            },
            symbol: 'rect',
            symbolSize: 8,
            label: {
              show:false,
              position: 'top',
              color: '#fff',
            },
            barWidth:"8px",
          },
          {
            barWidth:"8px",
            name: '优化前',
            type: 'bar',
            data: _this.beforeData,//[34,44,53, 70, 40],
            itemStyle: {
              color:'#ea68a2',
              barBorderRadius: [5, 5, 0, 0]
            },
            symbol:'circle',
            symbolSize: 8,
            label: {
              show:false,
              position: 'top',
              color: '#fff',
            },
          },
        ]
      });
    },
  }
}
</script>
<style scoped>
</style>
